<template>
  <view>
    <a-menu v-model:selectedKeys="current" mode="horizontal" theme="dark">
      <a-menu-item @click="chooseMenu(item)" v-for="item in menuList" :key="item.key" style="min-width: 120px;text-align: center">
        {{ item.name }}
      </a-menu-item>
    </a-menu>
    <RouterView />
  </view>
</template>

<script setup>
  import {ref, watch} from 'vue';
  import router from '@/router'
  import { RouterView } from 'vue-router'

  const current = ref(['restrain'])

  const menuList = ref([
    {
      id: 1,
      name: '属性克制',
      key: 'restrain',
      router: '/restrain'
    },
    {
      id: 1,
      name: '其它',
      key: 'other',
      router: '/other'
    }
  ])

  const chooseMenu = (item) => {
    router.replace({
      path: item.router
    })
  }

  watch(() => current.value, (newVal) => {
    router.replace({
      path: menuList.value.filter(item => item.key === newVal[0])[0].router
    })
  }, {immediate: true})
</script>

<style scoped>

</style>
